<template>
  <div class="new-business-product-list">
    <el-table
      :data="business.products"
      :stripe="true"
      :show-overflow-tooltip="true"
      border
      @row-click="rowClick"
      :header-cell-style="tableHeaderColor"
    >
      <el-table-column
        align="center"
        label="产品名称"
        fixed="left"
        prop="productName"
        min-width="160"
      >
        <template #default="scope">
          <span class="color-#0052cc"> {{ scope.row.productName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="产品条码" align="center" prop="productNo" min-width="120" />
      <el-table-column align="center" label="产品单位" prop="productUnit" min-width="160">
        <template #default="{ row }">
          <dict-tag :type="DICT_TYPE.CRM_PRODUCT_UNIT" :value="row.productUnit" />
        </template>
      </el-table-column>
      <el-table-column
        label="产品价格（元）"
        align="center"
        prop="productPrice"
        min-width="140"
        :formatter="erpPriceTableColumnFormatter"
      />
      <el-table-column
        label="商机价格（元）"
        align="center"
        prop="businessPrice"
        min-width="140"
        :formatter="erpPriceTableColumnFormatter"
      />
      <el-table-column
        align="center"
        label="数量"
        prop="count"
        min-width="100px"
        :formatter="erpPriceTableColumnFormatter"
      />
      <el-table-column
        label="合计金额（元）"
        align="center"
        prop="totalPrice"
        min-width="140"
        :formatter="erpPriceTableColumnFormatter"
      />
    </el-table>
    <CrmSpec ref="crmSpec" @getPage="handleQuery" />
  </div>
</template>
<script setup lang="ts">
import * as BusinessApi from '@/api/crm/business'
import { erpPriceInputFormatter, erpPriceTableColumnFormatter } from '@/utils'
import { DICT_TYPE } from '@/utils/dict'

const { business } = defineProps<{
  business: BusinessApi.BusinessVO
}>()

// 更改表头颜色
const tableHeaderColor = () => {
  return { background: '#fff', color: '#6b778c' }
}
const emit = defineEmits(['getBusinessValue'])
const crmSpec = ref(null)
const rowClick = (row) => {
  const nowIds = business.products.map((item) => item.productId)
  crmSpec.value.setDrawer(true, 'product', row.productId, nowIds)
}
const handleQuery = () => {
  emit('getBusinessValue')
}
</script>
<style scoped>
.new-business-product-list {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #172b4d1a;
  margin: 0 8px;
  padding: 16px;
}
</style>
